<template>
  <div>
    <TodoHeader>
      <h1 slot="main">待办事项</h1>
      <h4 slot="sub">Todo……</h4>
    </TodoHeader>
    <TodoInput @addNewTodoItem="addNewTodoItem"></TodoInput>
    <ul>
      <li
        is="TodoItem"
         v-for="list in todoList"
         :key="list.id"
         :item="list"
      ></li>
    </ul>
    {{todoList}}
  </div>
</template>

  

<script>
import TodoHeader from "@/pages/TodoHeader"
import TodoInput from "@/pages/TodoInput"
import TodoItem from "@/pages/TodoItem"
export default {
  name: "TodoList",
  components: {
    TodoHeader,
    TodoInput,
    TodoItem
  },
  data(){
    return {
      todoList:[{
        id:Math.random(),
        text:'学习',
        isCompleted:false
      }]
    }
  },
  methods:{
    addNewTodoItem(_text){
      this.todoList.push({
        id:Math.random(),
        text:_text,
        isCompleted:false
      })
    }
  }
};
</script>

<style>
</style>